//# sourceURL=http://uMapApp/UI/Slider
define([
    "mhjs/mhjs"
], function (
    mhjs
) {

    function Slider(option) {

        var _this = this;

        _this.currentIndex = 0;

        _this.ui = {
            container       : new mhjs.Div({"class": "container"})
            , forwardButton : new mhjs.Div({"class": "forwardButton button"})
            , backwardButton: new mhjs.Div({"class": "backwardButton button"})
        };

        mhjs.Div.call(_this, option);
        _this.addClass("slider");

        _this.append(_this.ui.container);
        _this.append(_this.ui.forwardButton);
        _this.append(_this.ui.backwardButton);

        _this.ui.forwardButton.on("click", function () {
            _this.forward();
        });

        _this.ui.backwardButton.on("click", function () {
            _this.backward();
        });


    }

    var _class = Slider;
    mhjs.Inherit(_class, mhjs.Div);


    Object.defineProperties(_class.prototype, {
        "list"      : {
            get: function () {
                return this._list;
            },
            set: function (list) {
                this._list = list;

                var _this = this;

                $.each(list, function (i, imgurl) {
                    var image = new mhjs.Img({
                        "src": imgurl
                    });

                    image.on("click", function () {
                        window.open(imgurl);
                    });

                    _this.ui.container.append(image);
                });

            }
        }
        , "forward" : {
            value: function () {
                var _this = this;

                if (_this.currentIndex < _this.list.length - 1) {

                    _this.currentIndex++;

                } else {

                    _this.currentIndex = 0;

                }

                _this.move();

            }
        }
        , "backward": {
            value: function () {

                var _this = this;

                if (_this.currentIndex > 0) {

                    _this.currentIndex--;

                } else {

                    _this.currentIndex = _this.list.length - 1;

                }

                _this.move();

            }
        }
        , "goLast"  : {
            value: function () {

                var _this = this;

                _this.currentIndex = _this.list.length - 1;

                _this.move();
            }
        }
        , "goFirst" : {
            value: function () {

                var _this = this;

                _this.currentIndex = 0;

                _this.move();
            }
        }
        , "move"    : {
            value: function () {

                var _this = this;

                _this.ui.container.css({
                    "transform": "translateX(-" + _this.currentIndex * _this.width() + "px)"
                });
            }
        }

    });

    return _class;

});